<template>
  <!-- 弹框 -->
  <el-dialog title="详细信息" v-model="dialogVisible" width="80%" :before-close="handleClose">
    <el-tabs v-model="activeTab" class="custom-tabs" @tab-change="handleClick">
      <el-tab-pane
        :name="item.id"
        v-for="item in tablist"
        :key="item.id"
        :label="item.title"
      ></el-tab-pane>
    </el-tabs>
    <div class="max-h-150 overflow-x-auto">
      <component :is="activeTab" :data="houseData"></component>
    </div>
  </el-dialog>
</template>

<script>
import { defineComponent } from "vue";
import ConsumerHouseDesignLink from "@/views/audit/houseEnd/components/consumer-house-design-link.vue";
import ConsumerHouseDesignBudget from "@/views/audit/houseEnd/components/consumer-house-design-budget.vue";
import ConsumerHouseDesignScheme from "@/views/audit/houseEnd/components/consumer-house-design-scheme.vue";
import ConstructionLink from "@/views/audit/houseEnd/components/construction-link.vue";
import ConstructionScheme from "@/views/audit/houseEnd/components/construction-scheme.vue";
import ConstructionMaterialInstall from "@/views/audit/houseEnd/components/construction-material-install.vue";
import ConstructionMaterialBuy from "@/views/audit/houseEnd/components/construction-material-buy.vue";

export default defineComponent({
  components: {
    ConsumerHouseDesignLink,
    ConsumerHouseDesignBudget,
    ConsumerHouseDesignScheme,
    ConstructionLink,
    ConstructionScheme,
    ConstructionMaterialInstall,
    ConstructionMaterialBuy,
  },
});
</script>

<script setup>
import { ref, watch } from "vue";
import { HOUSE_PROPERTY_ENUM, HANDLE_OBJECT_ENUM } from "./utils/enum";
import { getHouseById } from "@/api/apply/audit.js";
const reallyUrl = import.meta.env.VITE_API_IMAGE;
const emit = defineEmits(["update:visible"]);
const srcList = ref([]);
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  row: {
    type: Object,
    default: () => {},
  },
  type: {
    type: String,
    default: "company",
  },
});
const dialogVisible = ref(props.visible);
const houseData = ref({});
const activeTab = ref("consumer-house-design-link");
const tablist = ref([
  {
    id: "consumer-house-design-link",
    title: "设计关联",
  },
  {
    id: "consumer-house-design-budget",
    title: "品类预算",
  },
  {
    id: "consumer-house-design-scheme",
    title: "设计方案",
  },
  {
    id: "construction-link",
    title: "施工关联",
  },
  {
    id: "construction-scheme",
    title: "组织施工",
  },
  {
    id: "construction-material-install",
    title: "材料进场",
  },
  {
    id: "construction-material-buy",
    title: "材料选购",
  },
]);
// 关闭弹框的逻辑
const handleClose = () => {
  dialogVisible.value = false;
  emit("update:visible", false);
};
const handleCompanyDetail = async (houseId) => {
  try {
    const params = {
      houseId: houseId,
      stepInfoList: [
        "STEP_DESIGN_LINK",
        "STEP_DESIGN_SCHEME",
        "STEP_DESIGN_BUDGET",
        "STEP_CONSTRUCTION_LINK",
        "STEP_CONSTRUCTION_SCHEME",
        "STEP_CONSTRUCTION_MATERIAL_BUY",
        "STEP_CONSTRUCTION_MATERIAL_INSTALL",
        "STEP_CONSTRUCTION_MATERIAL_BUY",
      ],
    };
    houseData.value = await getHouseById(params);
  } catch (e) {
    console.log(e);
  }
};
watchEffect(() => {
  dialogVisible.value = props.visible;
  if (props.row && dialogVisible.value) {
    handleCompanyDetail(props.row.id);
  }
});
const handleClick = (tab, event) => {
  console.log(tab, event, "tab");
};
</script>

<style scoped>
.margin-top {
  margin-top: 20px;
}
</style>
